<template>
  <div class="Sk-container register">
    <div class="sign-up-panel">
      <ul class="tabs">
        <li class="active">
          注册账号
          <div class="selected-bottom"></div>
        </li>
      </ul>
      <div class="tab-content">
        <div class="form-panel">
          <div class="SK-form-body" :model="registerForm">
            <div class="form-input">
              <label class="label-elm">用户名</label>
              <div>
                <input
                  class="input-text"
                  type="text"
                  name="usename"
                  id="usename"
                  v-model="registerForm.username"
                  placeholder="请输入用户名 *唯一登录账号*"
                  :class="{ invalid: errors.has('username') }"
                  v-validate="{ required: true }"
                />
              </div>
              <span class="error-msg">{{ errors.first("username") }}</span>
            </div>
            <div class="form-input">
              <label class="label-elm">性&nbsp;&nbsp;&nbsp;&nbsp;别</label>
              <div class="group">
                <label>
                  <input
                    name="sex"
                    id="gender"
                    type="radio"
                    v-model="registerForm.sex"
                    value="男"
                  /><span></span>男
                </label>
                <label>
                  <input
                    name="sex"
                    id="gender"
                    type="radio"
                    value="女"
                    v-model="registerForm.sex"
                  /><span></span>女
                </label>
              </div>
            </div>
            <div class="form-input">
              <label class="label-elm">电&nbsp;&nbsp;&nbsp;&nbsp;话</label>
              <div>
                <input
                  class="input-text"
                  type="text"
                  name="phone"
                  id="phone"
                  v-model="registerForm.phone"
                  placeholder="请输入手机号码"
                  :class="{ invalid: errors.has('phone') }"
                  v-validate="{ required: true, regex: /^1\d{10}$/ }"
                />
              </div>
              <span class="error-msg">{{ errors.first("phone") }}</span>
            </div>
            <div class="form-input">
              <label class="label-elm">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
              <div>
                <input
                  class="input-text"
                  type="password"
                  name="password"
                  id="password"
                  placeholder="请输入密码：8-20位数字字母组合"
                  :class="{ invalid: errors.has('password') }"
                  v-model="registerForm.password"
                  v-validate="{ required: true, regex: /^[0-9A-Za-z]{8,20}$/ }"
                />
              </div>
              <span class="error-msg">{{ errors.first("password") }}</span>
            </div>
            <div class="form-input">
              <label class="label-elm">确认密码</label>
              <div>
                <input
                  class="input-text"
                  type="password"
                  name="password1"
                  id="password1"
                  placeholder="请再次填写密码"
                  :class="{ invalid: errors.has('password1') }"
                  v-model="registerForm.password1"
                  v-validate="{ required: true, is: registerForm.password }"
                />
              </div>
              <span class="error-msg">{{ errors.first("password1") }}</span>
            </div>

            <div>
              <div class="SK-button-com submit-btn">
                <button class="orange" @click="userRegister">注册</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    return {
      registerForm: {
        username: "",
        sex: "男",
        phone: "",
        password: "",
        password1: "",
      },
    };
  },
  methods: {
    async userRegister() {
      // 所有表单验证通过才可以
      const success = await this.$validator.validateAll();
      if (success) {
        try {
          await this.$store.dispatch("userRegister", this.registerForm);
          this.$router.push("/login");
        } catch (error) {
          alert(error.message);
        }
      }
    },
  },
};
</script>

<style>
@import "../../assets/css/login.css";
@import "../../assets/css/register.css";
</style>
